/**
 * 前台登录页
 */
import { defineComponent, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { SetCookieTOOL } from '@utils/index';
import { ElMessage } from 'element-plus';
import { LoginAPI } from '@service/api/LoginAPI';
import './style.scss';

export default defineComponent({
  name: 'Login',
  setup: () => {
    const router = useRouter();
    const state = reactive({
      psd: '',
      loading: false,
    });

    const submitForm = async () => {
      state.loading = true;
      const res = await LoginAPI({
        password: state.psd,
      });
      if (res) {
        SetCookieTOOL('user', res, 30);
        router.push({
          path: '/',
        });
      } else {
        ElMessage({
          type: 'error',
          message: '密码错误',
          duration: 3000,
          customClass: 'errorLog',
          center: true,
        });
      }
      state.loading = false;
    };

    return {
      ...toRefs(state),
      submitForm,
    };
  },
  render() {
    return (
      <div class="login" v-loading={this.loading} element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="login--from">
          <header>已打开密码保护，请输入密码</header>
          <main>
            <el-input
              modelValue={this.psd}
              type="password"
              onInput={(e) => {
                this.psd = e;
              }}
              onKeyup={(e) => {
                if (e.key === 'Enter') {
                  this.submitForm();
                }
              }}
            ></el-input>
            <div class="login_button" onClick={this.submitForm}>
              登录
            </div>
          </main>
        </div>
      </div>
    );
  },
});
